<template>
  <div>
    <div class="nav">
      <div class="hot">热门</div>
      <van-field
        v-model="state.fieldValue"
        is-link
        readonly
        label="地区"
        @click="state.show = true"
      />
      <van-popup v-model:show="state.show" round position="bottom">
        <van-cascader
          v-model="state.cascaderValue"
          title="请选择所在地区"
          :options="options"
          @close="state.show = false"
          @finish="onFinish"
        />
      </van-popup>
      <van-search v-model="value" placeholder="搜索店铺" />
    </div>
    <!-- :slides-per-view="5" -->
    <swiper :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange">
      <swiper-slide
        style="
          display: inline-block;
          width: 75px;
          height: 75px;
          margin-right: 20px;
          font-size: 12px;
          text-align: center;
          background-color: #fff;
          margin: 5px 5px;
        "
        ><div>
          <img
            style="width: 40px; margin: 5px 15px"
            src="https://x.dscmall.cn/storage/data/touch_icon/15630385671785.png"
            alt=""
          />
        </div>
        所有分类</swiper-slide
      >

      <swiper-slide
        v-for="item in shopStreet"
        v-bind:key="item.cat_id"
        style="
          display: inline-block;
          width: 75px;
          height: 75px;
          margin-right: 20px;
          font-size: 12px;
          text-align: center;
          background-color: #fff;
          margin: 5px 5px;
        "
      >
        <img
          style="width: 40px; margin: 5px 15px"
          v-bind:src="item.touch_icon"
          alt=""
        />
        <span>{{ item.cat_name }}</span>
      </swiper-slide>
    </swiper>

    <div
      class="shop"
      v-for="item in enterStore"
      v-bind:key="item.shop_expireDateEnd"
    >
      <div class="shoptop">
        <div class="shopimg">
          <img v-bind:src="item.logo_thumb" alt="" />
        </div>
        <div class="introduce">
          <p>{{ item.rz_shopName }}</p>
          <span>已经有{{ item.count_gaze }}人关注</span>
        </div>
        <div class="comeshop">
          <button class="onshop">
            <router-link to="/storedetails" style="color:#fff">进店 </router-link>
          </button>
          <button class="follow"><popup>关注</popup></button>
        </div>
      </div>
      <div class="list">
        <swiper
          :space-between="50"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
          <swiper-slide
            v-for="value in item.goods"
            v-bind:key="value.goods_id"
            style="width: 101px; margin-right: 1rem"
            ><div>
              <img v-bind:src="value.goods_thumb" alt="" />
            </div>
            <p
              style="
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
              "
            >
              {{ value.goods_name }}
            </p>
            <span>5588.00</span>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="tail">
      <p>没有更多了</p>
    </div>
  </div>
</template>



<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import { computed, reactive } from "vue";
import "swiper/swiper.less";
import Popup from "./Pupop";

export default {
  setup() {
    const state = reactive({
      show: false,
      fieldValue: "",
      cascaderValue: "",
    });
    const options = [
      {
        text: "浙江省",
        value: "330000",
        children: [{ text: "杭州市", value: "330100" }],
      },
      {
        text: "江苏省",
        value: "320000",
        children: [{ text: "南京市", value: "320100" }],
      },
    ];
    const onFinish = ({ selectedOptions }) => {
      state.show = false;
      state.fieldValue = selectedOptions.map((option) => option.text).join("/");
    };

    return {
      state,
      options,
      onFinish,
    };
  },
  components: {
    Swiper,
    SwiperSlide,
    Popup,
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper);
    },
    onSlideChange() {
      console.log("slide change");
    },
  },
  mounted() {
    this.$store
      .dispatch({
        type: "setShopstreetr",
      })
      .then((data) => {});
    this.$store
      .dispatch({
        type: "setEnterstorer",
      })
      .then((data) => {});
  },
  computed: {
    shopStreet() {
      console.log(this.$store.state.shop.setShopstreet);
      return this.$store.state.shop.setShopstreet;
    },
    enterStore() {
      console.log(this.$store.state.shop.setEnterstore);
      return this.$store.state.shop.setEnterstore;
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  text-align: center;
  font-size: 14px;
  background-color: #fff;
  .hot {
    width: 35%;
    display: inline-block;
    align-items: 1.875rem;
    padding: 0;
    color: #646566;
  }
  .van-cell {
    padding: 0;
    width: 20%;
    display: inline-block;
    /* overflow: hidden; */
    height: 2.0625rem;
    margin-top: 2px;
    // line-height: 55px;
    .van-field__control {
      display: none;
    }
    .van-cell__title {
      position: relative;
      left: 1.25rem;
    }
  }
  .van-search {
    padding: 0;
    width: 35%;
    display: inline-block;
    input {
      width: 30%;
    }
  }
}
.shop {
  width: 365px;
  // height: 270px;
  margin: 5px 5px;
  background-color: #fff;
  overflow: hidden;
  .shoptop {
    height: 65px;
    padding: 15px 11px;
    box-sizing: border-box;
    .shopimg {
      width: 3.2rem;
      margin-right: 10px;
      display: inline-block;
      img {
        width: 100%;
      }
    }
    .introduce {
      display: inline-block;
      width: 15rem;

      p {
        margin: 0;
        font-size: 15px;
      }
      span {
        font-size: 12px;
        color: #666;
      }
    }
    .comeshop {
      float: right;
      padding-top: 7px;
      box-sizing: border-box;
      width: 120px;
      height: 2.375rem;
      align-items: center;
      font-size: 12px;
      line-height: 25px;
      .onshop {
        width: 57px;
        float: left;
        background: linear-gradient(90deg, #fa2929, #ff583d);
        color: #fff;
        border: none;
        border-radius: 15px;
        height: 25px;
        line-height: 25px;
      }
      .follow {
        height: 25px;
        width: 57px;
        float: right;
        border: 1px solid red;
        color: red;
        background-color: #fff;
        border-radius: 15px;
      }
    }
  }
  .list {
    width: 100%;
    // height: 168px;
    padding: 0 0 1.8rem 1rem;
    box-sizing: border-box;
    .swiper-container {
      .swiper-wrapper {
        .swiper-slide {
          width: 101px;
          height: 155px;
          display: inline-block;

          margin-right: 20px;
          font-size: 12px;
          text-align: center;
          background-color: #fff;
          margin: 5px 5px;
          div {
            display: inline-block;
            width: 99px;
            height: 99px;
            img {
              width: 99px;
              height: 99px;
            }
          }

          p {
            margin: 9.75px 0 7.5px;
            font-size: 14px;
          }
          span {
            font-size: 14px;
            color: #fd001c;
          }
        }
      }
    }
  }
}
.tail {
  width: 100%;
  height: 70px;
  p {
    font-size: 18px;
    color: #ccc;
    text-align: center;
  }
}
</style>
